import { pageLeave } from "@/api/flandre-ui/request";
import { BasicTable, useTable, BasicColumn, TableAction } from "@/components/Table";
import CreateAndUpdata from "./components/createAndUpdata";
import { useDrawer } from "@/components/Drawer";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { useTranslation } from "react-i18next";
import { IconEnum } from "@/enums/appEnum";

export default function LeaveManagement() {
	// Table columns definition
	const { t } = useTranslation();
	const en_vi = "HRMS.leaveApproval";
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.staff_id"),
			dataIndex: "staffId",
			width: 100
		},
		{
			title: t(`${en_vi}.staffName`),
			dataIndex: "staffName",
			width: 100
		},
		{
			title: t(`${en_vi}.startDate`),
			dataIndex: "startDate",
			width: 150,
			render: value => (value ? new Date(value).toISOString().split("T")[0] : "")
		},
		{
			title: t(`${en_vi}.endDate`),
			dataIndex: "endDate",
			width: 150,
			render: value => (value ? new Date(value).toISOString().split("T")[0] : "")
		},
		{
			title: t(`${en_vi}.leaveType`),
			dataIndex: "leaveType",
			width: 150,
			render: value => {
				const types = {
					1: "Leave",
					2: "Overtime",
					3: "Compensatory Leave",
					4: "Business Trip",
					5: "Outing"
				};
				return types[value] || "Unknown";
			}
		},
		{
			title: t(`${en_vi}.reason`),
			dataIndex: "leaveReason",
			width: 200
		},
		{
			title: t("kevin_ui.status"),
			dataIndex: "status",
			width: 100,
			render: value => (value === "1" ? "Active" : "Inactive")
		},
		{
			title: t("felix_ui.action"),
			key: "actions",
			fixed: "right",
			width: 220,
			render: (_, record) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: handleApprove.bind(record)
						}
						// {
						// 	icon: IconEnum.DELETE,
						// 	label: t("felix_ui.delete"),
						// 	popConfirm: {
						// 		title: t("common.deleteMessage"),
						// 		placement: "left",
						// 		confirm: handleDelete.bind(null, record)
						// 	}
						// }
					]}
				></TableAction>
			)
		}
	];

	const [leaveTable, { reload }] = useTable({
		api: pageLeave,
		columns,
		showTableSetting: false,
		showIndexColumn: false
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	// Edit
	const handleApprove = (record: Recordable) => {
		openDrawer(true, {
			reload,
			record
		});
	};
	// const handleDelete = async (id: any) => {
	// 	try {
	// 		await delLeave(id);
	// 		message.success(t("viewComponents.patientInformation.deleteSuccessfully"));
	// 		reload();
	// 	} catch (error) {
	// 		t("viewComponents.patientInformation.deleteFailed");
	// 	}
	// };
	const handlerToolbarAction = (key: string) => {
		switch (key) {
			case "add":
				openDrawer(true, {
					reload
				});
				break;
		}
	};
	return (
		<div className="page">
			<div className="block">
				<h1 className="block-label">{t(`${en_vi}.leaveApproval`)}</h1>
				<BasicTable register={leaveTable}></BasicTable>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			<Toolbar action={handlerToolbarAction} btnList={["add"]} />
		</div>
	);
}
